<template>
  <div class="bodybox">
    <div v-if="zhuanji">
      <h3 class="tuijiantitle">编辑推荐</h3>
      <div class="dataerr" v-show="bianjierr">
        数据获取失败，正在使用服务器缓存！
      </div>
      <ul class="zhuanjituijian">
        <ZhuanJi
          v-for="item in zhuanji.slice(0, 6)"
          :key="item.id"
          :item="item"
          >{{ item.name }}</ZhuanJi
        >
      </ul>
    </div>
    <div v-else>
      <div class="loading">加载中...</div>
    </div>

    <div v-if="xinge">
      <h3 class="tuijiantitle">最新音乐</h3>
      <div class="dataerr" v-show="xingeerr">
        数据获取失败，正在使用服务器缓存！
      </div>

      <ul class="">
        <SongList
          v-for="(item, index) in xinge"
          :AudioplaysongId="AudioplaysongId"
          :key="item.id"
          :item="item"
          :idx="index"
          @AudioId="$emit('AudioId', $event)"
          :playing="playing"
          :songlist="songlist"
          @delsong="$emit('delsong',$event)"
          @addsonglist="$emit('addsonglist',$event)"

          >{{ item.name }}

          
        </SongList>
      </ul>
    </div>
    <div v-else>
      <div class="loading">加载中...</div>
    </div>
  </div>
</template>

<script>
import ZhuanJi from "../components/ZhuanJi.vue";
import SongList from "@/components/SongList.vue";
import HuanCun from "@/Datas/ZhuanJiHuanCun.json";

export default {
  components: {
    ZhuanJi,
    SongList,
  },
  props: {
    AudioplaysongId: Number,
    playing: Boolean,
    songlist:Array
  },

  data: function () {
    return {
      zhuanji: HuanCun,
      xinge: null,
      bianjierr: false,
      xingeerr: false,
    };
  },

  created() {
    this.axios
      .get("/personalized")
      .then((res) => {
        console.log(res.data);

        this.zhuanji = [...res.data.result];
      })
      .catch((err) => {
        (this.bianjierr = true), console.log(err);
      }),
      this.axios
        .get("/personalized/newsong")
        .then((res) => {
          console.log("新歌", res.data);

          this.xinge = [...res.data.result];
        })
        .catch((err) => {
          (this.xingeerr = true), console.log(err);
        });
  },
};
</script>

<style lang="less" scoped>
.bodybox {
  .tuijiantitle {
    // height: 30px;
    // line-height: 30px;
    margin: 15px 0;
    padding-left: 10px;
    border-left: 2px solid #b43d33;
  }
}

.zhuanjituijian {
  display: flex;
  flex-wrap: wrap;
}

.dataerr {
  color: #fff;
  background-color: red;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
</style>